<template>
  <div class="portfolio-list-page">
    <van-tabs class="tabbar" v-model="active" sticky swipeable line-width="20px" line-height="4px" @change="onRendered" :swipe-threshold="4">
      <van-tab title="周排行" name="14">
        <portfolio-list :portfolioList="portfolioList[this.active]" profitText="近一周收益" profit="weekProfitRate" @change="onChange"/>
      </van-tab>
      <van-tab title="月排行" name="13">
        <portfolio-list :portfolioList="portfolioList[this.active]" profitText="近一月收益" profit="monthProfitRate" @change="onChange"/>
      </van-tab>
      <van-tab title="近三月排行" name="12">
        <portfolio-list :portfolioList="portfolioList[this.active]" profitText="近三月收益" profit="seasonProfitRate" @change="onChange"/>
      </van-tab>
      <van-tab title="总排行" name="11">
        <portfolio-list :portfolioList="portfolioList[this.active]" profitText="总收益" profit="totalProfitRate" @change="onChange"/>
      </van-tab>
      <van-tab title="人气排行" name="4">
        <portfolio-list :portfolioList="portfolioList[this.active]" profitText="总收益" profit="totalProfitRate" @change="onChange"/>
      </van-tab>
    </van-tabs>
    <div class="text-center">
      <van-loading v-show="loading" type="spinner" size="16px">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, Loading } from 'vant';
import { queryPortfolioListApp } from '../../api/portfolio';
import PortfolioList from './components/PortfolioList.vue';

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Loading.name]: Loading,
    PortfolioList
  },

  data() {
    return {
      active: '14',
      page: 1,
      size: 10,
      portfolioList: {},
      loading: false
    }
  },

  mounted() {
    this.$setTitle('组合');
    this.queryPortfolioListApp();
    this.$bus.$on('reachBottom', this.reachBottom.bind(this));
    this.$bus.$on('onPullDownRefresh', () => {
      setTimeout(() => {
        this.page = 1;
        this.queryPortfolioListApp().then(() => {
          this.$bus.$emit('stopPullDownRefresh');
        });
      }, 500)
    });
  },

  beforeDestroy() {
    this.$bus.$off('reachBottom');
  },

  methods: {
    onRendered(name, title) {
      this.page = 1;
      this.$set(this.portfolioList, name, []);
      this.queryPortfolioListApp();
    },

    async queryPortfolioListApp() {
      try {
        this.loading = true;
        const data = await queryPortfolioListApp({
          offset: (this.page - 1) * this.size,
          size: this.size,
          sortField: this.active
        });
        this.$set(this.portfolioList, this.active, data.list);
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    },

    onChange(index, data) {
      console.log(index, data);
      this.$set(this.portfolioList[this.active], index, data);
    },

    async reachBottom() {
      try {
        this.loading = true;
        ++this.page;
        const data = await queryPortfolioListApp({
          offset: (this.page - 1) * this.size,
          size: this.size,
          sortField: this.active
        });
        this.$set(this.portfolioList, this.active, this.portfolioList[this.active].concat(data.list));
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style lang="less">
  .portfolio-list-page {
    .portfolio-list {
      margin-top: 10px;
    }
    .van-tab__text {
      font-size: 16px;
    }
    .van-tab.van-ellipsis {
      overflow: unset;
    }
    .tabbar {
      margin-bottom: 10px;
    }
    .van-tab__text--ellipsis {
      display: unset;
      overflow: unset;
      -webkit-line-clamp: unset;
      -webkit-box-orient: unset;
      white-space: nowrap;
    }
    .van-tabs__wrap--scrollable .van-tab {
      flex-basis: 0 !important;
      padding: 0 20px;
    }
  }
</style>
